<template>
  <div>
    <el-row :gutter="1">
      <el-form ref="course" :model="course" :rules="rules" size="mini" label-width="100px"
               label-position="left">
        <el-col :span="6">
          <el-form-item label="课程类别" prop="tId">
            <el-select @change="findCTypeByTid($event)"  v-model="course.tId" placeholder="请选择课程类别" clearable :style="{width: '100%'}">
              <el-option  v-for="(item, index) in tIdOptions" :key="index" :label="item.tname"
                         :value="item.tid" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内容类别" prop="ctId">
            <el-select    v-model="course.ctId" placeholder="请选择内容类别" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in ctIdOptions" :key="index" :label="item.ctName"
                           :value="item.ctId" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="课程名称" prop="cName">
            <el-input v-model="course.cName" placeholder="请输入课程名称" :maxlength="20" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item label="课程详情" prop="cInfo">
            <el-input v-model="course.cInfo" type="textarea" placeholder="请输入课程详情" :maxlength="50"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="选择讲师" prop="thId">
            <el-select v-model="course.thId" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in thIdOptions" :key="index" :label="item.thName"
                         :value="item.thId" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程价格" prop="cPrice">
            <el-input-number v-model="course.cPrice" placeholder="课程价格" :step='1' :min='1' :max='100000'>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="课程状态" prop="cFlag">
            <el-radio-group v-model="course.cFlag" size="medium">
              <el-radio v-for="(item, index) in cFlagOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="课程主图" prop="field103">
            <el-upload ref="field103" :file-list="field103fileList" :action="field103Action" :on-success="handle_success"
                       :before-upload="field103BeforeUpload" accept="image/*">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="特训班" prop="field107">
            <el-upload ref="field107" :file-list="field107fileList" :action="field107Action" :on-success="handleSuccess"
                       :before-upload="field107BeforeUpload" accept="image/*">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label="内部详情" prop="cDetails">
            <el-input v-model="course.cDetails" type="textarea" placeholder="请输入内部详情"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

  </div>
</template>
<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        course: {
          ctId: 1,
          tId: "",
          cName: undefined,
          cInfo: undefined,
          thId: undefined,
          cPrice: 198,
          cFlag: 1,
          cPic: null,
          cPic1: null,
          cDetails: "",
          cId:1
        },
        rules: {
          ctId: [{
            required: true,
            message: '请选择内容类别',
            trigger: 'change'
          }],
          tId: [{
            required: true,
            message: '请选择课程类别',
            trigger: 'change'
          }],
          cName: [{
            required: true,
            message: '请输入课程名称',
            trigger: 'blur'
          }],
          cInfo: [{
            required: true,
            message: '请输入课程详情',
            trigger: 'blur'
          }],
          thId: [{
            required: true,
            message: '请选择下拉选择',
            trigger: 'change'
          }],
          cPrice: [{
            required: true,
            message: '课程价格',
            trigger: 'blur'
          }],
          cFlag: [{
            required: true,
            message: '课程状态不能为空',
            trigger: 'change'
          }],
          cDetails: [{
            required: true,
            message: '请输入内部详情',
            trigger: 'blur'
          }],
        },
        field103Action: 'http://127.0.0.1:8999/upload/',
        field103fileList: [],
        field107Action: 'http://127.0.0.1:8999/upload/',
        field107fileList: [],
        ctIdOptions: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        tIdOptions: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        thIdOptions: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        cFlagOptions: [{
          "label": "上架",
          "value": 1
        }, {
          "label": "暂时不上架",
          "value": 2
        }],
      }
    },
    computed: {},
    watch: {},
    created() {
      this.findType()
      this.findAllTeacher()
     if(this.$route.params.course.cid!=undefined){
     this.course.cId=this.$route.params.course.cid
     this.course.cName=this.$route.params.course.cname
     this.course.cInfo=this.$route.params.course.cinfo
     this.course.cDetails=this.$route.params.course.cdetails
     this.course.thId=this.$route.params.course.thid
     this.course.cPic=this.$route.params.course.cpic
}

    },
    mounted() {

    },
    methods: {
      submitForm() {
        this.$refs['course'].validate(valid => {
          if (!valid) return

          var qs = require('qs');
          this.$axios.post("http://127.0.0.1:8999/course/saveCourse",qs.stringify(this.course)).then(res=>{
           if(res.data.code==200){
             this.$message.success('课程操作成功')
              this.$router.push({path:"/courseList"})
           }
          })
        })
      },
      resetForm() {
        this.$refs['course'].resetFields()
      },
      field103BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        let isAccept = new RegExp('image/!*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/!*类型的文件')
        }
        return isRightSize && isAccept
      },
      field107BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        return isRightSize && isAccept
      },
      findType(){
        this.$axios.get("http://127.0.0.1:8999/type/findType").then(res=>{
          if(res.data.code==200){
            this.tIdOptions=res.data.data
          }
        })
      },
      findCTypeByTid(tid){
        this.$axios.get("http://127.0.0.1:8999/type/findCTypeByTid/"+tid).then(res=>{
          if(res.data.code==200){
            this.ctIdOptions=res.data.data
          }
        })
      },
      findAllTeacher(){
        this.$axios.get("http://127.0.0.1:8999/teacher/findAllTeacher").then(res=>{
          if(res.data.code==200){
            this.thIdOptions=res.data.data
          }
        })
      },
      handle_success(res){
        if(res.code==200){
          this.course.cPic=res.message,
            this.$message.success('图片上传成功')
        }
      },
      handleSuccess(res){
        this.course.cPic1=res.message,
        this.$message.success('图片上传成功')
      }
    }
  }

</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }

</style>
